<script setup>
import {reactive} from "vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

/**
 * 本地存储的账户信息
 *
 * @type {any}
 */
const account = JSON.parse(localStorage.getItem('account-info') || '{}')

/**
 * 订单班管理员数据
 *
 * @type {UnwrapNestedRefs<{form: {orderClassAdminRoomNo: string, orderClassAdminRoomName: string, orderClassAdminPhone: string, orderClassAdminCreateTime: string, orderClassAdminEmail: string, orderClassAdminCreateMan: string, orderClassAdminCollageName: string, orderClassAdminSex: string, orderClassAdminCountNumber: string, orderClassAdminNo: string, orderClassAdminUpdateMan: string, orderClassAdminCollageNo: string, orderClassAdminAge: number, orderClassAdminUpdateTime: string, orderClassAdminName: string}}>}
 */
const orderClassAdminData = reactive({
    form: {
        orderClassAdminNo: '',
        orderClassAdminName: '',
        orderClassAdminAge: 0,
        orderClassAdminSex: '',
        orderClassAdminCollageNo: '',
        orderClassAdminCollageName: '',
        orderClassAdminRoomNo: '',
        orderClassAdminRoomName: '',
        orderClassAdminPhone: '',
        orderClassAdminEmail: '',
        orderClassAdminCreateMan: '',
        orderClassAdminCreateTime: '',
        orderClassAdminUpdateMan: '',
        orderClassAdminUpdateTime: '',
        orderClassAdminCountNumber: '',
    }
})

/**
 * 订单班管理员数据
 *
 * @type {UnwrapNestedRefs<{form: {orderClassAdminAge: number, orderClassAdminPhone: string, orderClassAdminEmail: string, orderClassAdminSex: string, orderClassAdminName: string, orderClassAdminNo: string}}>}
 */
const orderClassAdminNewData = reactive({
    form: {
        orderClassAdminNo: '',
        orderClassAdminName: '',
        orderClassAdminAge: 0,
        orderClassAdminSex: '',
        orderClassAdminPhone: '',
        orderClassAdminEmail: '',
    }
})

/**
 * 加载个人信息
 */
const loadOrderClassAdmin = () => {
    request.get(`/api/order-class-admin/order-class-admin-info/${account.accountNo}`).then(res => {
        if (res.code === "200") {
            if (res.data === null) {
                orderClassAdminData.form = {}
            } else {
                orderClassAdminData.form = res.data
            }
        }
    })
}
loadOrderClassAdmin();

/**
 * 更新个人信息
 */
const updateInfo = () => {
    if (account.accountRoleName === 'visitor-order-class-admin') {
        ElMessage.info("游客-订单班管理员仅可以查看信息")
    } else {
        orderClassAdminNewData.form.orderClassAdminNo = orderClassAdminData.form.orderClassAdminNo
        orderClassAdminNewData.form.orderClassAdminName = orderClassAdminData.form.orderClassAdminName
        orderClassAdminNewData.form.orderClassAdminAge = orderClassAdminData.form.orderClassAdminAge
        orderClassAdminNewData.form.orderClassAdminPhone = orderClassAdminData.form.orderClassAdminPhone
        orderClassAdminNewData.form.orderClassAdminEmail = orderClassAdminData.form.orderClassAdminEmail
        if (orderClassAdminData.form.orderClassAdminSex === "男") {
            orderClassAdminNewData.form.orderClassAdminSex = 1
        } else {
            orderClassAdminNewData.form.orderClassAdminSex = 0
        }
        request.put(`/api/order-class-admin/update-info`, orderClassAdminNewData.form).then(res => {
            if (res.code === "200") {
                loadOrderClassAdmin()
                ElMessage.success("修改成功")
            } else {
                ElMessage.error(res.msg)
            }
        })
    }
}

/**
 * 上传成功
 *
 * @param res 头像
 */
const uploadSuccess = (res) => {
    ElMessage.success("上传成功")
    account.accountPhoto = res.data
}

/**
 * 获取账号
 */
const getAccountNo = () => {
    if (account.accountRoleName === 'visitor-order-class-admin') {
        ElMessage.info("游客-订单班管理员仅可以查看信息")
    } else {
        request.get(`/files/get-account-no/${account.accountNo}`)
    }
}
</script>

<template>
    <div>
        <div class="card" style="width: 50%; padding: 40px;">
            <el-form :model="orderClassAdminData.form" label-width="100px" label-position="center"
                     style="padding-right: 40px">
                <el-form-item label="头像">
                    <el-image style="width: 150px; height: 150px" :src="account.accountPhoto"/>
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:9090/files/upload"
                            :show-file-list="false"
                            list-type="picture"
                            :on-success="uploadSuccess">
                        <div style="margin-top: 220px; margin-left: -200px"
                             v-if="account.accountRoleName === 'common-order-class-admin'">
                            <el-button @click="getAccountNo" type="primary" size="middle" round>修改头像</el-button>
                        </div>
                    </el-upload>
                    <div style="margin-top: 220px; margin-left: -150px"
                         v-if="account.accountRoleName === 'visitor-order-class-admin'">
                        <el-button @click="getAccountNo" type="primary" size="middle" round>修改头像</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="工号" prop="orderClassAdminNo">
                    <el-input style="width: 400px" v-model="orderClassAdminData.form.orderClassAdminNo"
                              autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="姓名" prop="orderClassAdminName">
                    <el-input v-model="orderClassAdminData.form.orderClassAdminName" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="年龄" prop="orderClassAdminAge">
                    <el-input v-model="orderClassAdminData.form.orderClassAdminAge" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="orderClassAdminData.form.orderClassAdminSex">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号" prop="orderClassAdminPhone">
                    <el-input v-model="orderClassAdminData.form.orderClassAdminPhone" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="邮箱" prop="orderClassAdminEmail">
                    <el-input v-model="orderClassAdminData.form.orderClassAdminEmail" autocomplete="off"/>
                </el-form-item>
            </el-form>
            <div>
                <el-button @click="updateInfo"
                           type="primary" style="margin-bottom: 10px;margin-left: 350px">修改信息
                </el-button>
            </div>
        </div>
        <div class="card" style="margin-top: 10px;width: 50%;padding: 40px;">
            <el-form :model="orderClassAdminData.form" label-width="100px" label-position="center"
                     style="padding-right: 40px">
                <el-form-item label="学院" prop="orderClassAdminCollageName">
                    <el-input v-model="orderClassAdminData.form.orderClassAdminCollageName" autocomplete="off"
                              disabled/>
                </el-form-item>
                <el-form-item label="办公室" prop="orderClassAdminRoomName">
                    <el-input v-model="orderClassAdminData.form.orderClassAdminRoomName" autocomplete="off" disabled/>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style scoped>

</style>